<html>
  <head>
    <title>Mandango</title>
    <script type="text/javascript">
      var seats = [
        [false,true,false,true,true,true,false,true,false],
        [false,true,false,false,true,false,true,true,true],
        [true,true,true,true,true,true,false,true,false],
        [true,true,true,false,true,false,false,true,true]
      ];
      var selSeat = -1;
      function initSeats(){
        // Initialize the appearance of all seats
        for (var i=0;i<seats.length;i++){
          for (var j=0;j<seats[i].length;j++){
            if (seats[i][j]){
              // Set the seat to available
              document.getElementById("seat"+(i*seats[i].length+j)).src = "available-seat.jpg";
              document.getElementById("seat"+(i+seats[i].length+j)).alt = "Available seat";
            } else {
              // Set the seat to unavailable
              document.getElementById("seat"+(i*seats[i].length+j)).src = "unavailable-seat.jpg";
              document.getElementById("seat"+(i*seats[i].length+j)).alt = "Unavailable seat";
            }
          }
        } 
      }
      function resizeSeats() {
        for (var i=0; i<seats.length;i++) {
          for (var j=0;j<seats[i].length;j++){
            document.getElementById("seat"+(i*seats[i].length+j)).style.width = (document.body.clientWidth - 100)/9;
          }
        }
      }
      function findSeats() {
        // If seat is already selected, reinitialize all seats to clear them
        if (selSeat >= 0){
          selSeat = -1;
          initSeats();
        }
        // Search through all the seats for availability
        var i=0;finished=false;
        while (i<seats.length && !finished) {
          for (var j=0;j<seats[i].length;j++){
            // See if the current seat is available
            if(seats[i][j] && seats[i][j+1] && seats[i][j+2]){
              // Set the seat selection and update the appearance of the seat
              selSeat = i*seats[i].length+j;
              setSeat(selSeat,"select","Your seat");
              setSeat(selSeat+1,"select",'Your seat');
              setSeat(selSeat+2,"select","Your seat");
              // Prompt the user to accept the seat
              var accept = confirm("Seat "+(j+1)+" through "+(j+3)+" in Row "+(i+1)+" are available. Accept?");
              if (!accept){
                // The user rejected the seat, so clear the seat selection and keep looking
                setSeat(selSeat,"available","Available seat");
                setSeat(selSeat+1,"available",'Available seat');
                setSeat(selSeat+2,"available","Available seat");
                selSeat = -1;
              } else {
                // The user accepted the seat, so we're done
                finished = true;
                break;
              }
            }
          }
          i++;
        }
      }
      function setSeat(seatNum, stats, description) {
        document.getElementById("seat"+seatNum).src = stats + '-seat.jpg';
        document.getElementById("seat"+seatNum).alt = description;
      }
      function getSeatStatus(seatNum){
        if (selSeat != -1 && (seatNum==selSeat||seatNum==(selSeat+1)||seatNum==(selSeat+2)))
          return "yours";
        else if (seats[Math.floor(seatNum/seats[0].length)][seatNum%seats[0].length])
          return "available";
        else
          return "unavailable";
      }
      function showSeatStatus(seatNum) {
        alert("This seat is " + getSeatStatus(seatNum) + ".");
      }
      window.onload = function(){
        document.getElementById("findseats").onclick = findSeats;
        for (var i=0;i<36;i++){
          document.getElementById("seat"+i).onclick = function(evt){showSeatStatus(i);};
        }
        window.onresize = resizeSeats;
        initSeats();
        resizeSeats();
      }
    </script>
  </head>

  <body>
    <div style="margin-top:75px;text-align:center">
      <img id="seat0" src="" alt="" />
      <img id="seat1" src="" alt="" />
      <img id="seat2" src="" alt="" />
      <img id="seat3" src="" alt="" />
      <img id="seat4" src="" alt="" />
      <img id="seat5" src="" alt="" />
      <img id="seat6" src="" alt="" />
      <img id="seat7" src="" alt="" />
      <img id="seat8" src="" alt="" /><br>
      <img id="seat9" src="" alt="" />
      <img id="seat10" src="" alt="" />
      <img id="seat11" src="" alt="" />
      <img id="seat12" src="" alt="" />
      <img id="seat13" src="" alt="" />
      <img id="seat14" src="" alt="" />
      <img id="seat15" src="" alt="" />
      <img id="seat16" src="" alt="" />
      <img id="seat17" src="" alt="" /><br>
      <img id="seat18" src="" alt="" />
      <img id="seat19" src="" alt="" />
      <img id="seat20" src="" alt="" />
      <img id="seat21" src="" alt="" />
      <img id="seat22" src="" alt="" />
      <img id="seat23" src="" alt="" />
      <img id="seat24" src="" alt="" />
      <img id="seat25" src="" alt="" />
      <img id="seat26" src="" alt="" /><br>
      <img id="seat27" src="" alt="" />
      <img id="seat28" src="" alt="" />
      <img id="seat29" src="" alt="" />
      <img id="seat30" src="" alt="" />
      <img id="seat31" src="" alt="" />
      <img id="seat32" src="" alt="" />
      <img id="seat33" src="" alt="" />
      <img id="seat34" src="" alt="" />
      <img id="seat35" src="" alt="" /><br>
      <input type="button" id="findseats" value="Find Seats" />
    </div>
  </body>
</html>
